import React from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";
import DataSet from "@antv/data-set";

class PieCharts extends React.Component {

  render() {
    const { DataView } = DataSet;
    const { Html } = Guide;
    const data = this.props.data;
    const text = this.props.text;
    const dv = new DataView();
    dv.source(data).transform({
      type: "percent",
      field: "y",
      dimension: "x",
      as: "percent"
    });
    const cols = {
      percent: {
        formatter: val => {
          val = (val * 100).toFixed(2) + "%";
          return val;
        }
      }
    };
    let amount = 0;
    for (let i = 0;i<data.length;i++) {
      amount += data[i].y
    }
    return (
      <div>
        <Chart
          height={320}
          width={window.innerWidth-80}
          data={dv}
          scale={cols}
          padding={[80, 0, 0, 0]}
          forceFit
        >
          <Coord type={"theta"} radius={0.8} innerRadius={0.7} />
          <Axis name="percent" />
          <Legend
            position="top"
            offsetY={-10}
            offsetX={0}
          />
          <Tooltip
            showTitle={false}
            itemTpl="<li><span style=&quot;background-color:{color};&quot; class=&quot;g2-tooltip-marker&quot;></span>{name}: {value}</li>"
          />
          <Guide>
            <Html
              position={["50%", "50%"]}
              html={(xScale, yScale) => {
                return `<div style="color:#8c8c8c;font-size:0.96em;text-align: center;width: 6em;">${text}<br><span style="color:#262626;font-size:2em">${amount}</span></div>`; //位置信息
              }}
              alignX="middle"
              alignY="middle"
            />
          </Guide>
          <Geom
            type="intervalStack"
            position="percent"
            color="x"
            tooltip={[
              "x*percent",
              (item, percent) => {
                percent = (percent * 100).toFixed(2) + "%";
                return {
                  name: item,
                  value: percent
                };
              }
            ]}
            style={{
              lineWidth: 1,
              stroke: "#fff"
            }}
          >
            <Label
              content="percent"
              formatter={(val, item) => {
                return item.point.x + ": " + val;
              }}
            />
          </Geom>
        </Chart>
      </div>
    );
  }
}

export default PieCharts;
